<template>
	<view class="">
		<view class="padding">
			<view class="tab-bar-box tab-bar-box-center">
				<u-tabs :list="tabs" @click="changeTab"></u-tabs>
			</view>
		</view>
		<view class="box-title m022 ">
			<view class="fc">
				<i></i>
				<text id="c_zqname">全部项目</text>
			</view>
		</view>
		<view class="basedLogistics m022" id="c_biaoge">
			<view class="chanping-box" v-for="(item,index) in obejdata">
				<view style="height: 16rem;width: 100%">
					<image style="width: 100%;height: 100%;" :src="item.projectImgurl" mode="scaleToFill"></image>
				</view>
				<view class="chanping-txt">
					<view class="span">
						<image class="tus" src="../../static/img/icon_rz.png" mode=""></image>
						<text class="chping-text">{{item.projectName}}</text>
					</view>
					<view class="chanping-kuang-box">
						<view class="chanping-kuang" style="display: block;">
							<view class="red">{{item.startingAmount}}</view>
							<view class="changping-kuang-txt">起投金额</view>
						</view>
						<view class="chanping-kuang" style="display: block;">
							<view class="red">{{item.expectedProfit}}</view>
							<view class="changping-kuang-txt">预计收益</view>
						</view>
						<view class="chanping-kuang" style="display: block;">
							<view class="red">{{item.projectCycle}}天</view>
							<view class="changping-kuang-txt">项目周期</view>
						</view>
					</view>
					<view class="p">
						<view class="left">项目总额：</view>
						<view class="right">{{ item.projectScale }}</view>
						<view class="left">|</view>
						<view class="left">项目收益：</view>
						<view class="right">{{ item.returnRate }}</view>
					</view>
					<view class="p">
						<view class="left">项目进度：</view>
						<view class="right flex1">
							<view class="progress-box">
								<view class="progress-bar">
									<view class="slider"
										:style="'width:' + item.progress + '%;background: #e63324;'">
									</view>
								</view>
							</view>
						</view>
						<span class="chanping-jdwb">{{ item.progress }}%</span>
					</view>
					<view class="p">
						<view class="left">分红模式：</view>
						<view class="right flex1">
								<text>{{item.projectMode}}</text>
						</view>
					</view>
				</view>
				<view class="chanping-btn" :style="{'background-color':item.projectStatus===false?'#424242':''}">
					<navigator v-if="item.projectStatus===true" :url="getDetailUrl(item)">
						<text style="display: inline-block;">立即投资</text>
					</navigator>
					<text v-else style="display: inline-block;" >项目已售馨</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			obejdata: Array
		},
		data() {
			return {
				tabs: [{
					name: '全部',
					typeid: ''
				}, {
					name: '战略投资区',
					typeid: 0
				}, {
					name: 'C轮投资区',
					typeid: 1
				}]
			}

		},
		methods: {
			getDetailUrl(param) {
				console.log(param);
				return `/pages/tabBar/project/project_detail?id=${param.projectId}`;
			},
			changeTab(item) {

				this.$emit('childEvent', item.name)
			},
		}
	}
</script>

<style scoped>
	/deep/uni-view[data-v-3b2b1a80],
	uni-scroll-view[data-v-3b2b1a80],
	uni-swiper-item[data-v-3b2b1a80] {
		margin: 0 auto;
	}

	/deep/.u-tabs__wrapper__nav__item {
		padding: 0 1rem;
	}

	.tus {
		margin-right: 0.35rem;
		width: 2.5rem;
		vertical-align: middle;
		height: 100%;
	}

	.chanping-txt .span {
		font-size: 0.7rem;
		font-weight: 550;
		color: #000000;
		height: 1rem;
		line-height: 1.06rem;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.chping-text {
		font-size: 0.7rem;
	}

	.chanping-btn {
		width: 100%;
		border-radius: 0 0 0.5rem;
		box-sizing: border-box;
		height: 1.5rem;
		background: #0b6fc0;
		color: rgba(255, 255, 255, 1);
		margin-top: 0.5rem;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.changping-kuang-txt {
		font-size: 0.55rem;
		color: #0a0909;
		height: 1rem;
		border-radius: 5px 5px 0 0;
		font-weight: 500;
		display: flex;
		background-color: #f7f4ed !important;
		align-items: center;
		justify-content: center;
	}
</style>